<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--先写图片的显示，隐藏效果，再追加控制和计时器和延时器-->
		<!--建立显示和关闭方法-->
		
	</head>
	<!--大概有基础后写style代码-->
	<style type="text/css">
		div#adDiv{
			width: 2000px;
			height: 400px;
			position: fixed;
		}
		div#switchDiv{
			width: 100px;
			line-height: 200px;
			position: absolute;
			right: 0;
			top: 0;
		}
	</style>
	<script type="text/javascript">
//		为什么用立即执行函数来建立方法?
//		因为立即执行函数在执行后会被销毁,清理出内存
//不按照教程来,先从显示/隐藏开始
//1.先写关闭的方法，使用window。onload方法包裹函数

      
         window.onload= function(){
         var closeAd = document.querySelector('input');
         var adObj=document.getElementById('adDiv');
         	closeAd.onclick=function(){
         		
         		adObj.style.display='none';
         	}
         }
     
//     第一步完成,现在做显示/隐藏图层 
            function switchDiv(){
            	var show=document.getElementById('switchDiv');
            	show.onclick=function(){
//          	在这里不用document方法,直接获取style对应的值
                                                                             adObj.style.display == "none" ? adObj.style.display = "block" : adObj.style.display = "none";
                                                                             
                                                                             console.log(adDiv.style.display)
//          	试用queryelements方法取input的值
//              var sr=document.querySelector('#switchDiv');
//              sr.value=='隐藏图层'?sr.value='显示图层':sr.value='隐藏图层';
            	}
            }
            
            
	</script>
	<body>
		<input type="button" id="switchDiv" value="隐藏图层" />
		<div id="adDiv" style="height: 400px;">
		<img src="img/12.jpg" width="600px"/>
		<!--图层里面再镶嵌一个用来关闭的div-->
		</div>
		
	</body>
	<script type="text/javascript">
		console.log(adDiv.style.display);
		console.log(typeof adDiv.style.display);
	</script>
</html>
